package myJs.wechatMember.viewTest

import myJs.CpLayer
import myJs.admin.testManage.TestManage
import myJs.admin.updateTest.UpdateTest
import myJs.api.Api
import myJs.myPkg.{ReactRouterDOM, layer}
import myJs.tool.Tool
import org.scalajs.dom.{URLSearchParams, html}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.React
import slinky.web.html._
import myJs.Implicits._
import myJs.common.AppendViewCp
import myJs.cps.Style
import myJs.myPkg.antdMobile._
import myJs.myPkg.jquery.$
import shared.pojo.Sample.ProcessData

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  import shared.pojo.Pojo.test._

  val curPage = ViewTest
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val initSampleId = searchParams.get("sampleId").null2Empty
    val initTestType = searchParams.get("testType").null2Empty
    val initCompany = searchParams.get("company").null2Empty

    val (sampleId, setSampleId) = useState(initSampleId)
    val (testType, setTestType) = useState(initTestType)
    val (company, setCompany) = useState(initCompany)
    val initTestInfoData = TestInfoData(id = 0, info = List.empty[ProcessData])
    val (testData, setTestData) = useState(initTestInfoData)

    val navigate = ReactRouterDOM.useNavigate()

    useEffect(() => {
      val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
      val index = layer.load(0, options)
      val request = Get.Request(id = 0, sampleId = sampleId, testType = testType, company = company)
      Api.test.get(request).map { curTestInfoData =>
        setTestData(curTestInfoData)
        layer.close(index)
        $("body").scrollTop(0)
      }

    }, List()
    )

    object FTool {

      def back = () => {
        navigate(-1)
        ()
      }

    }

    div(
      NavBar(
        onBack = FTool.back
      )(curPage.titleStr),

      div(style := Style(marginTop = 45),
        Card(
          title = "基本信息",
        )(
          Grid(
            columns = 5
          )(
            Grid.Item(
              "样本编号:"
            ),
            Grid.Item(
              span = 4
            )(
              testData.sampleId
            ),
            Grid.Item(
              "测试类型:"
            ),
            Grid.Item(
              span = 4
            )(
              testData.testType
            ),
            Grid.Item(
              "公司:"
            ),
            Grid.Item(
              span = 4
            )(
              testData.company
            ),
          )
        ),
        Card(
          title = "进度信息",
        )(
          testData.info.sortBy(_.time).zipWithIndex.map { case (processData, curI) =>

            Grid(
              key = s"${curI}",
              columns = 5
            )(

              Grid.Item(
                "时间:"
              ),
              Grid.Item(
                span = 4
              )(
                processData.time
              ),
              Grid.Item(
                "标题:"
              ),
              Grid.Item(
                span = 4
              )(
                processData.title
              ),
              Grid.Item(
                "内容:"
              ),
              Grid.Item(
                span = 4
              )(
                processData.content
              ),
              Grid.Item(
                "附件:"
              ),
              Grid.Item(
                span = 4
              )(
                AppendViewCp(serverFiles = processData.fileNames,
                  folder = processData.folder, id = testData.sampleId, testId = testData.id)
              ),
              Grid.Item(
                span = 5
              )(
                if (curI == testData.info.size - 1) {
                  null
                } else {
                  Divider(
                    i(className := "fa fa-angle-double-down")
                  )
                }

              )
              ,

            )

          }

        ),
      )


    )

  }


}
